<template>
    <div class="contact">
        <el-dialog
            :close-on-click-modal="false"
            v-model="isShow.value"
            :show-close="false"
            @close="emit('handelDialogClose')"
            @opened="getMap">
            <i class="close iconfont icon-guanbi" @click="emit('closeDialog')"></i>
            <div class="content">
                <div class="title">联系我们</div>
                <div class="contact-container">
                    <div class="info-left">
                        <div class="contact_cell">
                            <p>医院地址：</p>
                            <span>{{ props.hospitalDialogData.hospitalInfo.address.address }}</span>
                        </div>
                        <div class="contact_cell tel" >
                            <p>联系电话：</p>
                            <div class="tel-item" v-html="props.hospitalDialogData.hospitalInfo.phone"></div>
                        </div>
                    </div>
                    <div class="map-right">
                        <div id="map"></div>
                    </div>
                </div>
                <div class="more" @click="getMore">访问官网了解更多交通导航></div>
            </div>
        </el-dialog>
    </div>
</template>
<script setup>
/* eslint-disable */

    import { ref,reactive,toRefs, defineProps, defineEmits, onMounted, nextTick, watch } from 'vue'
    import { ElDialog } from 'element-plus'
    import { getUrlQueryData} from '@/utils/tools'
    import { getHospital } from '@/api/hosInfo'
    const props = defineProps({
        contactDialogShow:Boolean,
        hospitalDialogData:Object
    })
    const isShow = reactive({
        get value(){ 
            return props.contactDialogShow;
        },
        set value(v){
            return ;
        }
    })
    const emit = defineEmits(["closeDialog","handelDialogClose"])
    const getMap = () => {
        // nextTick(() => {
            initMap()
        // })
    }
    //访问官网
    const getMore = () => {
        window.open(props.hospitalDialogData.hospitalInfo.add_url, "_blank")
    }

    const initMap = () => {
        let map = new BMap.Map("map");
        let point = new BMap.Point(props.hospitalDialogData.longitude,props.hospitalDialogData.latitude)
        map.centerAndZoom(point, 15);  // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom();     //开启鼠标滚轮缩放
        var marker = new BMap.Marker(point);
        var label = new BMap.Label("重庆市第七人民医院",{offset:new BMap.Size(-50,-30)});
        marker.setLabel(label)//设置标注说明
        map.addOverlay(marker);
        // var infoWindow = new BMapGL.InfoWindow("<p style='font-size:14px;'>重庆市第七人民医院</p>");  //弹出窗口
        // marker.openInfoWindow(infoWindow); 
        //  marker.addEventListener("click", function(){
        //       this.openInfoWindow(infoWindow);
        //  });
    }

</script>
<style scoped>
.contact >>> .el-dialog {
  border-radius: 4px;
  width: 960px;
}
.contact >>> .el-dialog__header {
    display: none;
}
.contact >>> .el-dialog__body {
  padding: 40px 80px 47px !important;
}
.contact .close {
  font-size: 24px;
  color: #717378;
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
.contact .close:hover {
    color: #1F73F2;
}
.content .title {
  font-size: 24px;
  color: #000;
  margin-bottom: 36px;
  text-align: center;
  cursor: default;
}
.contact-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.contact-container .info-left {
    width: 380px;
    height: 400px;
    background-color: #F2F2F2;
    box-sizing: border-box;
    padding: 20px;
    color: #333333;
    font-size: 14px;
    font-family: Arial;
    cursor: default;
}
.contact-container .info-left p {
    color: #AAAAAA;
    margin-bottom: 14px;
}
.contact-container .info-left .tel {
    margin-top: 30px;
}
.content .more {
    font-size: 13px;
    font-weight: normal;
    font-family: Arial;
    color: #1F73F2;
    cursor: pointer;
    float: right;
}
.map-right {
    width:380px;
    height: 400px;
}
#map {
    width: 100%;
    height: 100%;
}
@media screen and (max-width: 1360px) and  (min-width: 1024px) {
    .contact >>> .el-dialog {
        transform: scale(0.8);
        transition:transform 0.3s linear;
    }
}
@media screen and (max-width: 1024px) {
    .close {
        font-size: 16px;
    }
    .contact >>> .el-overlay {
        z-index: 10001 !important;
    }
    .contact >>> .el-dialog {
        /* width: 360px; */
        /* height: 748px; */
        width: 95%;
        height: 95%;
        margin: auto;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 4px 4px 0 0;
    }
    .contact >>> .el-dialog__body {
        padding: 20px 30px 30px !important;
        height: 100%;
        box-sizing: border-box;
    }
    .contact .content {
        height: 100%;
    }
    .contact .content .title {
        font-size: 18px;
        margin-bottom: 30px ;
    }
    .contact-container {
        height: calc(100% - 74px);
    }
    .contact-container .info-left {
        width: 100%;
        height: 50%;
        margin-bottom: 10px;
    }
    .map-right {
        width:100%;
        height: 50%;
    }
}
</style>